﻿<div id="ConfigForm" data-bind="css: {wait: waiting()}">
    <h2>
        Web und Liste</h2>
    <h3>
        Bitte ein Web auswählen:</h3>
    <select data-bind="options: Webs, optionsText: 'name', value: Web">
    </select>
    <h3>
        Bitte eine Liste auswählen:</h3>
    <select data-bind="enable: Lists().length > 0, options: Lists, optionsText: 'name', value: List">
    </select>
    <h2>
        Feldauswahl</h2>
    
    <table>
    <tr>
    <td>  <h3>    Filter:</h3>
    <select data-bind="enable: SPFields().length > 0, options: SPFields, optionsText: 'name', selectedOptions:Filter"
        size="7" multiple="multiple">
    </select></td>
    <td> 
    <h3>
        Felder:
    </h3>
    <select data-bind="enable: numericFields().length > 0, options: numericFields, optionsText: 'name', selectedOptions:selectedSPFields"
        size="7"  multiple="multiple">
    </select>
    </td></tr></table>
  
   
    <h3>
        Formeln:<span class="info" title="Sie können auch eigene Felder über eine Formel generieren. Wählen Sie dazu zunächst die Felder aus die Sie in Ihrer Formel benutzen möchten, im rechten Bereich tauchen hinweise zu den Platzhaltern auf die Sie dann in der Formel benutzen können.<br /> Eine Beispielformel könnte dann so aussehen: <br /><i>{0}*{1}+sqrt({0})</i> <br />Zum Produkt des ersten und zweiten Wertes wird die Wurzel des ersten Wertes addiert.<br/> Erlaubte Operatoren sind: +: Plus; -: Minus; *: Mal; /: Geteilt; %: Modulo; <br/>Es kann auch Pi und E benutzt werden. <br />Desweiteren können Sie auch einige Mathematische Funktionen benutzen, dazu zählen: <ul><li>Abs({WERT}): Der Absolute Wert: Abs(-1) => 1</li><li>Cos({WERT}), Sin({WERT}), Tan({WERT}), Acos({WERT}), Asin({WERT}), Atan({WERT}): Cosinus, Sinus, Tangenz, Arkuscosinus, Arkussinus, Arkustangenz</li><li>Ceiling({WERT}), Floor({WERT}), Round({WERT}): Aufgerundeter Wert, Abgerundeter Wert, kaufmännisch gerundeter Wert</li><li>Exp({Potenz}): e<sup>{Potenz}</sup></li><li>Log({WERT}, {Basis}): Logarithmus {WERT} zur Basis {Basis}. Bsp.: Log({0},10)</li><li>Max({WERT1},{WERT2}), Min({WERT1},{WERT2}): Der größere/ kleiner von 2 Werten.</li><li>Pow({Basis}, {Potenz}): {Basis}<sup>{Potenz}</sup></li><li>Sqrt({Wert}): Die Quadratwurzel aus {WERT}</li><li>Fac({Wert}):  Fakultät von {Wert}(Technisch bedingt nur bis 20 möglich)</li></ul>"></span>
    </h3>
    <table>
        <tr>
            <td>
                Felder die benutzt werden:
                <br />
                <select data-bind="enable: numericFields().length > 0, options: numericFields, optionsText: 'name', selectedOptions: curFormulaFields"
                     size="7" multiple="multiple">
                </select>
            </td>
            <td>
                Feldbezeichnung:
                <br />
                <input type="text" data-bind="value: curFormulaFieldName, valueUpdate:'afterkeydown'"/><br />
                Formel:
                <br />
                <input type="text" data-bind="value: curFormula, valueUpdate:'afterkeydown'" />
            </td>
            <td>
                <p data-bind="if: curFormulaFields().length >0">
                    Platzhalter:
                </p>
                <ul data-bind="foreach: curFormulaFields">
                    <li>{<span data-bind="text: $index"></span>} = <span data-bind="text: name"></span>
                    </li>
                </ul>
            </td>
        </tr>
    </table>
    <button data-bind="enable: curFormulaFieldName() != '' && curFormula() != '', click: addFormulaField">
        Formel hinzufügen</button>
    <ul data-bind="foreach: FormulaFields">
        <li><span data-bind="text: name"></span>: <span data-bind="text: niceFormula"></span>
            <button data-bind="click: $root.removeFormulaField">
                -</button></li>
    </ul>
    <h2>
        Feldeinstellungen und Sortierung<span class="info" title="Per Drag and Drop kann nachfolgend die Sortierung der Felder beeinflust werden. Desweiteren kann die Ausgabe der Werte angepasst werden. <br />Dabei dient {0} als Platzhalter für den Wert bzw. Feldnamen. <br />Dies kann durch Text und HTML ergänzt werden. <br /> Bsp: &amp;lt;b>Das Feld {0} hat den Wert: &amp;lt;/b><br> Um einen Fett gedruckten Feldnamen mit Ergänzungen auszugeben.<br /><br />Bei Formelfeldern und berechneten Spalten kann zusätzlich noch die Zahlenformatierung angegeben werden:<br/> Für den Zahlenwert 1000000 ergeben sich folgende Möglichkeiten <ul><li>Währung: {0:c} > 1.000.000,00 €</li><li>Dezimalzahl: {0:d} > 1000000</li><li>Wissenschaftlich: {0:s} > 1,000000e+006</li><li>Festkommazahl: {0:f} > 1000000,00</li><li>Tausender Trennzeichen: {0:n} > 1.000.000,00</li><li>Hexadezimal: {0:x4} > f4240</li></ul>Über das Feld AggregatsTyp kann bestimmt ob die Werte Addiert(Sum), gezählt(Count) oder ihr Aritmethische Mittel bestimmt(Average) werden soll."></span></h2>
    <ul data-bind="foreach: Fields" id="sortable">
        <li><b data-bind="text: name"></b><span data-bind="visible: !opened(), click: openToggle">[+]</span><span data-bind="visible: opened(), click: openToggle">[-]</span>
            <div data-bind="visible: opened()">
                AggregatsTyp:
                <br />
                <select type="text" data-bind="options: $root.aggregates, value: aggregate">
                </select>
                <br />
                Feldbezeichnung Format:
                <br />
                <input type="text" data-bind="value: formatField" /><br />
                Feldwert Format:
                <br />
                <input type="text" data-bind="value: format" />
            </div>
        </li>
    </ul>
    <br />
    <button data-bind="click: save">
        Speichern</button>
    <script type="text/javascript">

        ko.applyBindings(new HDIAggregatedViewConfig());

        $(function () {
            $("#sortable").sortable({
                placeholder: "ui-state-highlight"

            });

            $('#ConfigForm [title]').qtip({
                position: {
                    my: 'bottom center',
                    at: 'top center'
                },
                style: {
                    classes: 'ui-tooltip-bootstrap'
                }
            });


        }); 

    </script>
</div>
